<script lang="ts" setup>
	import {
		reactive,
		ref,
		getCurrentInstance
	} from "vue";
	import type {
		FormInstance
	} from "element-plus";
	import {
		ElMessage
	} from "element-plus";
	// import NavigationVue from "../../components/Navigation.vue";

	let {
		proxy
	} = getCurrentInstance();

	const form = reactive({
		email: "",
		yzm: "",
	});
	let password = ref("");
	let account = ref("");
	let flagIoginType = ref(false);
	let xinxi = ref("点击获取验证码");
	let context = ref("管理员登录")
	let flag = ref(false);
	let timer = ref(32);
	var fdata = new FormData();

	const formRef = ref < FormInstance > ();
	const dynamicValidateForm = reactive < {
		domains: DomainItem[];
		email: string;
	} > ({
		domains: [{
			key: 1,
			value: "",
		}, ],
		email: "",
	});

	interface DomainItem {
		key: number;
		value: string;
	}
	let yzm = "88888";
	const submitForm = (formEl: FormInstance | undefined) => {
		if (!formEl) return;
		formEl.validate(async (valid) => {
			if (valid && !flagIoginType.value) {
				flag.value = true;
				let data = setInterval(() => {
					xinxi.value = `请${timer.value - 2}秒后重试`;
					timer.value--;
					// console.log(timer.value);
					if (timer.value <= 1) {
						timer.value = 32;
						flag.value = false;
						xinxi.value = "点击获取验证码";
						clearInterval(data);
					}
				}, 1000);

				fdata.append("email", dynamicValidateForm.email);

				let res = await proxy.$axios.post("./loginyzm", fdata);
				// console.log(fdata.get("email"));
				ElMessage({
					message: "验证码发送成功",
					type: "success",
				});
				console.log("验证码发送成功!");
				// console.log(res.data.yzm);
				yzm = res.data.yzm;
			}
		});
	};
	const login = async () => {
		if (flagIoginType.value) {
			if (password.value == "666666" && account.value == "root") {
				ElMessage({
					message: "后台登录成功",
					type: "success",
				});
				setTimeout(() => {
					window.open(`${window.origin}/#/backstage?true`, "_self");
				}, 1000);
			}
		} else {
			if (form.yzm == yzm) {
				ElMessage({
					message: "登录成功",
					type: "success",
				});
				let res = await proxy.$axios.post("./login", fdata);
				console.log(res);

				setTimeout(() => {
					window.open("/", "_self");
				}, 1000);
			} else {
				ElMessage.error("请输入正确的验证码");
			}
		}
		// console.log(yzm);
	};
	const rootIogin = () => {
		flagIoginType.value = !flagIoginType.value
		if (flagIoginType.value) {
			context.value = "用户登录"
		} else {
			context.value = "管理员登录"
		}
	}
</script>
<template>
	<!-- <NavigationVue></NavigationVue> -->

	<div>
		<div class="loginbox">
			<div class="login">
				<h1>登录</h1>
				<br />

				<el-form ref="formRef" :model="dynamicValidateForm" label-width="" class="demo-dynamic">
					<el-form-item prop="email" v-if="!flagIoginType" label="邮箱" label-width="55px" :rules="[
              {
                required: true,
                message: '请输入正确的邮箱',
                trigger: 'blur',
              },
              {
                type: 'email',
                message: '请输入正确的邮箱',
                trigger: 'blur',
              },
            ]">
						<el-input v-model="dynamicValidateForm.email" />
					</el-form-item>
					<el-form-item prop="yzm" v-if="!flagIoginType" label="验证码" label-width="" :rules="[
              {
                required: false,
                message: '验证码错误',
                trigger: 'blur',
              },
              {
                type: 'yzm',
                message: '验证码错误',
                trigger: 'blur',
              },
            ]">
						<el-input v-model="form.yzm" />
					</el-form-item>
					<el-form-item prop="account" label="账号" label-width="55px" v-if="flagIoginType">
						<el-input v-model="account" />
					</el-form-item>
					<el-form-item prop="password" label="密码" label-width="55px" v-if="flagIoginType">
						<el-input v-model="password" />
					</el-form-item>
					<div class="yzmbox">
						<el-button type="primary" @click="login">登录</el-button>
						<el-button type="primary" @click="rootIogin">{{context}}</el-button>
						<el-button type="primary" :disabled="flag" @click="submitForm(formRef)">{{ xinxi }}</el-button>
					</div>
				</el-form>
			</div>
		</div>
		<div class="dhl">
			<!-- <div class="logo">
        <div class="center_logo1">RZF</div>
      </div> -->
			<!-- <div class="tel">
        <img src="../langxia/img/tel.png" alt="" />
        <div>028-87327655</div> -->
			<!-- </div> -->
		</div>
		<div class="box"></div>
		<div class="shucai"></div>
	</div>
	<Footer1></Footer1>
</template>
<style scoped lang="scss">
	.box {
		height: 600px;
		margin: auto;
		/* margin-left: -50px; */
		background-image: url(./img/QQ图片20221004225258.png);
		/* overflow: hidden; */
		background-repeat: no-repeat;
	}

	.dhl {
		height: 40px;
		width: 100%;
		background-color: #162d46;
		overflow: hidden;

		// justify-content: space-between;
	}

	.shucai {
		height: 100px;
		/* position: relative; */
		margin: auto;
		margin-top: -20px;
		background-image: url(./img/shucai.png);
		background-size: 100% 100px;
		background-repeat: no-repeat;
	}

	.yzmbox {
		margin-top: 30px;
		margin-left: 30px;
		/* padding-left: 50px; */
	}

	.login {
		/* height: 300px; */
		/* line-height: 300px;s */
		width: 350px;
		margin: 60px auto;
	}

	.logo {
		width: 280px;
		box-sizing: content-box;
		margin-top: 2px;
	}

	.center_logo1 {
		text-align: center;
		width: 50px;
		height: 30px;
		line-height: 30px;
		margin-left: 30px;
		font-size: 25px;
		background-color: #db2534;
		border-radius: 10px;
		margin-top: 5px;
		margin-right: 5px;
		color: white;
		transform: skewX(-20deg);
		margin-left: 200px;
	}

	.loginbox {
		background-color: rgba(240, 248, 255, 0.7);
		width: 400px;
		height: 250px;
		position: absolute;
		top: 100px;
		right: 150px;
		/* opacity: 0.5; */
	}

	h1 {
		margin-left: 140px;
		margin-top: -40px;
		/* margin: auto; */
	}

	.tel {
		width: 280px;
		display: flex;
		margin-left: 1200px;
		margin-top: -34px;

		div {
			color: #db2534;
			font-weight: 700;
			height: 40px;
			line-height: 40px;
			padding-left: 10px;
		}
	}
</style>
